<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<div id="root">
	
	<component :is="currentView"></component>
	 <ul><!--tab按钮-->
	 <li><label><input type="radio" name='page' value='todo' v-model='currentView'> Home</label></li>
	 <li><label><input type="radio" name='page' value='about' v-model='currentView'> About</label></li>
	 </ul>
</div>
<script>
	/**
	 * 通过 Slot 可以实现把父组件渲染出来的HTML插入到子组件中，目前还不清楚什么时候会需要这样
	 * 做，而且这么做对子组件的侵入性太大。
	 * 动态切换组件
	 * 这个功能感觉有点多余，感觉很多情况下我们应该是通过逻辑代码来实现切换，而不是通过Vue内
	 * 置的动态组件来切换。不过用来实现一个类似 tab 切换的功能还是很方便的。
	 */
var Form = Vue.extend({//局部注册一个组件
	 props: {//prop验证
		 username: {
		 	type: String,
		 	default: "Unnamed"
		 }
	 },
	 data: function() {//初始化input
		 return {
		 	input: "",
		 };
	 },
	 template: `
	    <div>
		 <h1>{{username}}'s Todo List</h1>
		 <form v-on:submit="add" v-on:submit.prevent>
		 	<input type="text" v-model="input"/>
		 	<input type="submit" value='add' />
		 </form>
		</div>
	 `,
	 methods: {
		 add: function() {//自定义方法
		 	console.log(this.$dispatch)
		 	this.$dispatch("add", this.input); //这里就是向父组件发送消息 冒泡
		 	this.input = "";
		 }
	 }
});
// List 只负责展示列表和处理用户勾选操作，它接收到 add 消息之后会在自己上添加一个条目
var List = Vue.extend({
	 template: `
	 	<div>
		 <ul>
		 <li v-for='todo in list'>
		 <label v-bind:class="{ done : todo.done }" >
		  <input type="checkbox" v-model="todo.done"/>
		  {{todo.title}}
		 </label>
		 </li>
		 </ul>
		</div>`,
	 props: {
		 initList: {
		 	type: Array
		 }
	 },
	 data: function() {
		 return {
		 	list: []
		 }
	 },
	 events: {
		 add: function(input) {
		 	console.log(input)
		 	if(!input) return false;
		 	this.list.unshift({
		 		title: input,
		 		done: false
		 	});
		 }
	 }
});
	//我们这里给 Todo List 增加一个 about 页面。那么首先我们需要把 vm 改成一个组件，这个组件叫 Todo，它就是整个 Todo 页面：
var Todo = Vue.extend({//todo页面
	 template: `
		 <div id="todo">
		 	<todo-form username='Lily'></todo-form>
		 	<todo-list></todo-list>
		 </div>
	 `,
	 components: {
	 	"todo-form": Form,
	 	"todo-list": List
	 },
	 events: {
		 add: function(input) {
		 	this.$broadcast("add", input);
		 }
	 }
});
<!--------------------------上面是一个页面，下面也是一个页面------------------------------>
// 其实改动就第一行。然后我们需要创建一个 About 组件：
var About = Vue.extend({
	 template: `
	 	<div id="about">
	 	<p>About Todo List V0.1.0</p>
	 	<p>Content here</p>
	 </div>`
});
// 接下来是重点了，我们要创建一个实例 vm，这vm要负责切换这两个页面：
var vm = new Vue({
 el: "#root",
 data: {
 	currentView: "todo"
 },
 components: {
 	"todo": Todo,
 	"about": About
 }
});
/**
 *  上面的代码有两处需要注意：
 *  •通过 component这个特殊标签，然后用 :is 属性来进行组件的切换。
 *  •radio 通过双向绑定来修改 currentView 字段，从而实现点击之后就可以进行切换。
 */
</script>	
</body>
</html>